
window.onload = function () {
    changeUlHeight();
    buildclass();
}

window.onresize = function () {
    changeUlHeight();
    removeclass();
}

function changeUlHeight() {
    var li = document.getElementsByClassName("time");
    var i;
    var h = document.documentElement.clientHeight;
    h -= 70;
    for (i = 0; i < li.length; i++) {
        li[i].style.height = h / 8 + 'px';
    }
}

function buildclass() {
    $.getJSON("../data/curriculum.json", function (data) {
        for (day in data.course) {
            div = document.getElementById(day);
            for (i in data.course[day]) {
                var start = parseFloat(data.course[day][i].start_time);
                var perc_start = (((start * 100) % 100) / 60 + parseInt(start) - 8) / 16;
                var end = parseFloat(data.course[day][i].end_time);
                var perc_end = (((end * 100) % 100) / 60 + parseInt(end) - 8) / 16;
                var main_div = document.createElement("div");
                main_div.className = "row justify-content-center text-white class";
                main_div.style.width = "100%";
                var h = document.documentElement.clientHeight;
                main_div.style.height = (h - 70) * (perc_end - perc_start) + 'px';
                if (i % 2)
                    main_div.style.backgroundColor = "rgb(148, 238, 211)";
                else
                    main_div.style.backgroundColor = "wheat";
                main_div.style.position = "absolute";
                main_div.style.top = (h - 70) * perc_start + 30 + 'px';
                var div_1 = document.createElement("div");
                div_1.className = "align-self-start";
                div_1.style.fontSize = "10px";
                var temp = data.course[day][i].start_time.replace('.',':');
                var word_1 = document.createElement("strong");
                word_1.textContent = temp;
                var div_2 = document.createElement("div");
                div_2.className = "align-self-center d-none d-md-block";
                div_2.style.fontSize = "15px";
                var word_2 = document.createElement("strong");
                word_2.textContent = data.course[day][i].name;
                var div_3 = document.createElement("div");
                div_3.className = "align-self-center d-sm-block d-md-none";
                div_3.style.fontSize = "10px";
                var word_3 = document.createElement("strong");
                word_3.textContent = data.course[day][i].name;
                var div_4 = document.createElement("div");
                div_4.className = "align-self-end";
                div_4.style.fontSize = "10px";
                var word_4 = document.createElement("strong");
                var temp = data.course[day][i].end_time.replace('.',':');
                word_4.textContent = temp;
                div_1.appendChild(word_1);
                div_2.appendChild(word_2);
                div_3.appendChild(word_3);
                div_4.appendChild(word_4);
                main_div.appendChild(div_1);
                main_div.appendChild(div_2);
                main_div.appendChild(div_3);
                main_div.appendChild(div_4);
                div.appendChild(main_div);
            }
        }
    });
}

function removeclass(){
    $.getJSON("../data/curriculum.json", function (data) {
        var convert = document.getElementsByClassName("class");
        var count = 0;
        for (day in data.course) {
            for (i in data.course[day]) {
                var start = parseFloat(data.course[day][i].start_time);
                var perc_start = (((start * 100) % 100) / 60 + parseInt(start) - 8) / 16;
                var end = parseFloat(data.course[day][i].end_time);
                var perc_end = (((end * 100) % 100) / 60 + parseInt(end) - 8) / 16;
                var h = document.documentElement.clientHeight;
                convert[count].style.height = (h - 70) * (perc_end - perc_start) + 'px';
                convert[count].style.top = (h - 70) * perc_start + 30 + 'px';
                count += 1;
            }
        }
    });
}